<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column fixed prop="number" label="试题编号" width="150">
      </el-table-column>
      <el-table-column prop="subject" label="学科" width="120">
      </el-table-column>
      <el-table-column prop="catalog" label="目录" width="120">
      </el-table-column>
      <el-table-column prop="questionType" label="题型" width="120">
        <template slot-scope="{ row }">
          {{ row.questionType | formatDifficulty }}
        </template>
      </el-table-column>
      <el-table-column prop="question" label="题干" width="300">
        <template slot-scope="{ row }">
          {{ row.question | html2Text }}
        </template>
      </el-table-column>
      <el-table-column prop="addDate" label="录入时间" width="120">
        <template slot-scope="{ row }">
          {{ row.addDate | parseTimeByString }}
        </template>
      </el-table-column>
      <el-table-column prop="difficulty" label="难度" width="120">
        <template slot-scope="{ row }">
          {{ row.difficulty | formatQuestionTypes }}
        </template>
      </el-table-column>
      <el-table-column prop="creator" label="录入人" width="120">
      </el-table-column>
      <el-table-column prop="chkState" label="审核状态" width="120">
        <template slot-scope="{ row }">
          {{ row.chkState | fromatstate }}
        </template>
      </el-table-column>
      <el-table-column prop="chkRemarks" label="审核意见" width="120">
      </el-table-column>
      <el-table-column prop="chkUser" label="审核人" width="120">
      </el-table-column>
      <el-table-column prop="publishState" label="发布状态" width="120">
        <template slot-scope="{ row }">
          {{ row.publishState | fromatZhangtai }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleClicks(scope.row)"
            >预览</el-button
          >
          <el-button
            type="text"
            size="small"
            :disabled="scope.row.chkState !== 0"
            @click="handleClick(scope.row)"
            >审核</el-button
          >
          <el-button
            type="text"
            size="small"
            :disabled="ListValue.publishState == 0"
            @click="this.$router.push('/questions/new?id=xx')"
            >修改</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="open(scope.row.publishState, scope.row.id)"
            >{{ scope.row.publishState === 0 ? "上架" : "下架" }}</el-button
          >
          <el-button
            type="text"
            size="small"
            :disabled="ListValue.publishState == 0"
            @click="openDel(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹窗 -->
    <Answer
      v-if="showAnswers"
      :dialog-visibles="dialogVisibles"
      :list-value="ListValue"
      @setDialogVisibles="setDialogVisibles"
    ></Answer>
    <!-- 审核 -->
    <Audit1
      v-if="showAnswer"
      :dialog-visible="dialogVisible"
      :list-value="ListValue"
      @setDialogVisible="setDialogVisible"
    ></Audit1>
    <!-- 上架 -->

    <!-- 分页 -->
    <div class="block">
      <el-pagination
        :hide-on-single-page="value"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pagesize"
        layout="total,prev, pager, next,sizes, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { choice, choicePublish, remove } from '../../../api/hmmm/questions'
import Answer from './answer.vue'
import Audit1 from './audit.vue'

export default {
  name: 'TabsVue',
  components: { Answer, Audit1 },
  props: {
    tabsLabl: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      value: false,
      total: 0, // 总条数
      page: 1,
      pagesize: 5,
      tableData: [], // 所有数据
      // type: '全部'
      showAnswer: false, // 预览显示
      dialogVisible: false, // 子组件弹框显示
      showAnswers: false, // 预览显示
      dialogVisibles: false, // 子组件弹框显示
      ListValue: {} // 点击预览数据
    }
  },
  watch: {
    tabsLabl: {
      handler(newVal, oldVal) {
        this.tabsClick(newVal)
        // console.log(this.tabsClick(newVal), '数据监听')
      },
      immediate: true
    }
  },
  created() {
    this.AgeChoice({ page: this.page, pagesize: this.pagesize })
  },
  mounted() {},
  methods: {
    // 切换模态框状态
    setDialogVisible() {
      // console.log('父')
      this.dialogVisible = false
    },
    setDialogVisibles() {
      // console.log('父')
      this.dialogVisibles = false
    },
    // 列表操作
    handleClick(row) {
      // console.log(row, 'shangjia')
      this.$nextTick(() => {
        this.ListValue = row
      })
      //   显示弹框
      this.dialogVisible = true
      this.showAnswer = true
    },
    // 列表操作
    handleClicks(row) {
      // console.log(row, 'shangjia')
      this.$nextTick(() => {
        this.ListValue = row
      })
      //   显示弹框
      this.dialogVisibles = true
      this.showAnswers = true
    },
    // 列表数据
    async AgeChoice(data) {
      const res = await choice(data)
      // console.log(res, '父级')
      // console.log(this.pagesize, '每页页数')
      this.total = res.data.counts
      // console.log(this.total, '组件里面')
      this.$emit('sumValue', this.total)
      this.tableData = res.data.items
      // console.log(this.tableData, 'tatatat')
    },

    // 分页
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.pagesize = val
      this.AgeChoice({ page: this.page, pagesize: this.pagesize })
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.page = val
      this.AgeChoice({ page: this.page, pagesize: this.pagesize })
    },
    // tabs点击事件
    tabsClick(tabsLabl) {
      // console.log(tabsLabl)
      // this.type = event.label
      switch (tabsLabl) {
        case '全部':
          this.AgeChoice({ page: this.page, pagesize: this.pagesize })
          break
        case '待审核':
          this.AgeChoice({ page: this.page, pagesize: this.pagesize, chkState: 0 })
          break
        case '已审核':
          this.AgeChoice({ page: this.page, pagesize: this.pagesize, chkState: 1 })
          break
        case '已拒绝':
          this.AgeChoice({ page: this.page, pagesize: this.pagesize, chkState: 2 })
          break
        default:
          this.AgeChoice({ page: this.page, pagesize: this.pagesize })
          break
      }
    },
    // 上架
    open(event, id) {
      this.$confirm('此操作将上架该组题, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // console.log(event)
        // 调用上下架接口
        await choicePublish({ id, publishState: event })
        // console.log('上架', res)
        this.$message({
          type: 'success',
          message: '操作成功'
        })
        // 刷新数据列表
        this.AgeChoice({ page: this.page, pagesize: this.pagesize })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 删除
    openDel(event) {
      this.$confirm('此操作将删除该组题, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // 删除数据
        await remove({ id: event })
        // console.log('删除成功', res)
        // 刷新数据列表
        this.AgeChoice({ page: this.page, pagesize: this.pagesize })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}

</script>

<style lang="less" scoped>
</style>
